<template>
	<view id="WorkOrder-add">
		<view class="publicItem">
			<text>维修等级</text>
			<uni-data-select v-model="formData.level" :localdata="range"></uni-data-select>
		</view>
		<view class="publicItem">
			<text class="publicItem_rule">报修类型<text>*</text></text>
			<uni-data-select v-model="formData.types" :localdata="type"></uni-data-select>
		</view>
		<view class="publicItem">
			<text class="publicItem_rule">设备名称<text>*</text></text>
			<input type="text" placeholder="请输入" v-model="formData.names" >
		</view>
		<view class="publicItem">
			<text class="publicItem_rule">设备位置<text>*</text></text>
			<input type="text" placeholder="请输入" v-model="formData.address">
		</view>
		<view class="publicItem">
			<text>维修部门</text>
			<uni-data-select v-model="formData.department" :localdata="list_"></uni-data-select>
		</view>
		<view class="publicItem">
			<text>联系人</text>
			<input type="text" placeholder="请输入" v-model="formData.repair_applicant">
		</view>
		<view class="publicItem">
			<text>联系电话</text>
			<input type="text" placeholder="请输入" v-model="formData.phone">
		</view>
		<view class="public_content">
			<text class="publicItem_rule">报修内容<text>*</text></text>
			<textarea placeholder="故障描述填写,300字以内" v-model="formData.describe" />
		</view>
		<view class="public_img">
			<text @click="Success">添加图片(您最多可以添加3张照片)</text>
			<view class="images">
				<image :src="item" v-for="(item,index) in imgs" ></image>
			</view>
			
			<!-- <uni-file-picker  v-model="imageValue" fileMediatype="image" mode="grid" @change="Success"  :limit="3" /> -->
		</view>
		<button @click="handlerTi">提交</button>
	</view>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { request } from '@/unit/request.js'
const imgs=ref([])
	onMounted(()=>{
		uni.setStorageSync('token','Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyaWQiOiI2NDI1MmU1NWE5M2VjMWJmODg0ZGU5NTMiLCJsb2dpbmlkIjoiNjQyNTJlNTVhOTNlYzFiZjg4NGRlOTU1IiwiaWF0IjoxNjgwNzU5MjI0LCJleHAiOjE2ODA3NjY0MjR9.D3Tu5xEZ6_AqlIRRAmSmkhK7vHBSFycpMihbnsU6WFg')
		request({
			url:"http://42.192.15.126:3000/pan/department",
			method:'GET'
		}).then(item=>{
			console.log(item);
			let a=[]
			item.data.forEach(items=>{
				a=[...a,{value:items._id,text:items.dname}]
			})
			list_.value=a
		})
	})
	const Success=(item)=>{
		uni.chooseImage({
			success: (chooseImageRes) => {
				const tempFilePaths = chooseImageRes.tempFilePaths;
				uni.uploadFile({
					url: 'http://42.192.15.126:3000/yan/head', //仅为示例，非真实的接口地址
					filePath: tempFilePaths[0],
					name: 'file',
					success: (uploadFileRes) => {
						console.log(JSON.parse(uploadFileRes.data).filename);
						imgs.value=[...imgs.value,JSON.parse(uploadFileRes.data).filename]
					}
				});
			}
		});
	}
	const handlerTi=()=>{
		request({
			url:"http://42.192.15.126:3000/yan/work_sheet",
			method:'POST',
			data:{...formData.value,'old_imgs':imgs.value}
		}).then(item=>{
			console.log(item)
			uni.redirectTo({
				url:"/pages/work-order-management/work-order-query/work-order-query"
			})
		})
	}
	let list_=ref([])
	let formData = ref({
		
	})
	let range = [{
			value: 3,
			text: "高"
		},
		{
			value: 2,
			text: "中"
		},
		{
			value: 1,
			text: "低"
		}
	]
	let type=[{
			value: "空调",
			text: "空调"
		},
		{
			value: "水管",
			text: "水管"
		},
		{
			value: "手机",
			text: "手机"
		}]
	let imageValue = ref([])
</script>

<style lang="scss">
	#WorkOrder-add {
		height: calc(100vh - 94px);
		background-color: #fafafa;

		button {
			width: 50%;
			margin-top: 10px;
			color: white;
			background-color: #3366ff;
		}

		.publicItem {
			display: grid;
			align-items: center;
			grid-template-columns: 20% calc(80% - 10px);
			grid-gap: 10px;
			padding: 10px 10px;
			background-color: white;
			margin-bottom: 10px;

			.publicItem_rule {
				position: relative;

				text {
					position: absolute;
					right: 0;
					color: red;
				}
			}

			.uni-forms-item__content {
				.uni-stat__select {
					.uni-stat-box {
						.uni-select {
							border: 0;
						}
					}
				}
			}
		}


		.public_content,
		.public_img {
			.images{
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
			}
			image{
				width: 150rpx;
				height: 150rpx;
			}
		}

		.public_content {
			margin-bottom: 10px;

			text {
				padding-left: 10px;
				box-sizing: border-box;
				margin: 0;
			}

			textarea {
				padding: 10px;
				box-sizing: border-box;
				width: 100%;
				height: 100px;
				background-color: white;
			}

			.publicItem_rule {
				position: relative;
				padding-right: 10px;

				text {
					position: absolute;
					right: 0;
					color: red;
				}
			}
		}

		.public_img {
			text {
				margin-left: 10px;
				margin-bottom: 5px;
			}
		}
	}
</style>